import { StyleSheet, Text } from 'react-native'
import React, { useEffect } from 'react'
import { SafeAreaView } from 'react-native'
import TabBar from './src/screen/TabBar2'
// import Routes from './src/router'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { NativeBaseProvider, extendTheme } from 'native-base'
import store, { persistor } from './src/redux/store';
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import Login from './src/screen/Login'
import Settings from './src/screen/Settings'
import Details from './src/screen/Details'
import MyGoods from './src/screen/MyGoods'
import MyNews from './src/screen/MyNews'
import UploadGoods from './src/screen/UploadGoods'
import BusinessCenter from './src/screen/BusinessCenter'
import UserInfo from './src/screen/UserInfo'
import Category from './src/screen/Category'
import GoodsDetail from './src/screen/GoodsDetail'
import GoodsResult from './src/screen/GoodsResult'
import Publish from './src/screen/Publish'
import ChatWindow from './src/screen/ChatWindow'
import CommonForm from './src/screen/CommonForm'
import Test from './src/screen/Test'

import AsyncStorage from '@react-native-async-storage/async-storage'
import { SocketProvider } from './src/hook/useSocket'

import axios from './src/axios'
import { useState } from 'react'
import { setMsgListAction } from './src/redux/actionCreator/chat'

const Stack = createNativeStackNavigator()

const newColorTheme = {
  brand: {
    900: '#8287af',
    800: '#7c83db',
    700: '#b3bef6',
  },
};
const theme = extendTheme({ colors: newColorTheme });

const App = () => {
  console.log('user', store.getState().userReducer)

  const [user, setUser] = useState(store.getState().userReducer)
  useEffect(() => {
    // 获取持久化存储信息
    AsyncStorage.getItem('persist:user').then((data) => {
      const user = JSON.parse(JSON.parse(data).userReducer)
      console.log('获取持久化存储信息=', user);
      setUser(user)
    })
  }, [])
  useEffect(() => {
    // 初始化数据
    axios.get('/friend').then(res => {
      console.log('调用接口', res.data)
      store.dispatch(setMsgListAction(res.data))
    }).catch((err) => { })
  }, [])
  return (
    <SocketProvider user={user}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <SafeAreaView style={styles.container}>
            <NativeBaseProvider NativeBaseProvider theme={theme} >
              <NavigationContainer>
                <Stack.Navigator initialRouteName="Login"
                  screenOptions={{
                    headerStyle: {
                      backgroundColor: 'orange',
                    },
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      fontWeight: 'bold',
                    },
                  }}
                >
                  <Stack.Screen name="TabBar" component={TabBar}
                    options={{ headerShown: false }}
                  />
                  <Stack.Screen name="Login" component={Login} options={{
                    title: '登录'
                  }} />
                  {/* initialParams 默认参数 */}
                  <Stack.Screen name="Details">
                    {(props) => <Details {...props} extraData={{ id: '66', name: '你好' }} />}
                  </Stack.Screen>
                  <Stack.Screen name="Settings" component={Settings}
                    options={{
                      title: '设置',
                      headerStyle: {
                        backgroundColor: '#000',
                      },
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        fontWeight: 'bold',
                      }
                    }}
                  />
                  <Stack.Screen name="MyGoods" component={MyGoods} options={{
                    title: '我的物品'
                  }} />
                  <Stack.Screen name="UploadGoods" component={UploadGoods} options={{
                    title: '上传商品'
                  }} />
                  <Stack.Screen name="MyNews" component={MyNews} options={{
                    title: '我的空间'
                  }} />
                  <Stack.Screen name="BusinessCenter" component={BusinessCenter} options={{
                    title: '个人主页'
                  }} />
                  <Stack.Screen name="UserInfo" component={UserInfo} options={{
                    title: '用户信息'
                  }} />
                  <Stack.Screen name="Category" component={Category} options={{
                    title: '商品分类'
                  }} />
                  <Stack.Screen name="GoodsDetail" component={GoodsDetail} options={{
                    title: '商品详情'
                  }} />
                  <Stack.Screen name="GoodsResult" component={GoodsResult} options={{
                    // headerShadowVisible: false
                    // headerShown: false
                    // title: '商品列表'
                    // headerLeft: () => <Text>left</Text>,
                    // headerTitle: () => <Text>大师傅似的</Text>
                  }} />
                  <Stack.Screen name="Publish" component={Publish} options={{
                    title: '发表'
                  }} />
                  <Stack.Screen name="ChatWindow" component={ChatWindow} />
                  <Stack.Screen name="CommonForm" component={CommonForm} />
                  <Stack.Screen name="Test" component={Test} />

                </Stack.Navigator>
              </NavigationContainer>
            </NativeBaseProvider >
          </SafeAreaView>
        </PersistGate>
      </Provider>
    </SocketProvider>
  )
}

export default App

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})